<style lang="less"scoped="scoped">
	.filmlist{
		margin:0 15px;
		.item{
			position: relative;
			width: 100%;
			width: 345px;
			padding: 18px 0;
			border-bottom: 1px dashed;
			img{
				
				position: absolute;
				left: 10px;
				top: 15px;
				height: 83px;
				width: 60px;
			}
		}	p{
				height: 30px;
				margin-left: 78px;
				.grade{
					float: right;
					color: orange;
				}
				
			}
			.intro,.cinemaCount{
				font-size: 12px;
				color: gray;
			}
	}
	.item:last-child{
	border-bottom: none;
}
</style>


			
<template>
		<!--正在播放-->
		<ul class="filmlist">
			<van-list v-model="loading" :finished="finished" @load="onLoad" :offset="10">
						<li class="item" v-for="item in playingList" :key="item.id"@click="clickFun(item.id)">
							<img :src="item.poster.thumbnail"/>
						
						
							<p id="name"class="name">
								{{item.name}}
								<a id="grade"class="grade">{{item.grade}}分</a>
							</p>
							<p id="intro"class="intro">{{item.intro}}</p>
							<p id="cinemaCount"class="cinemaCount">
								{{item.cinemaCount}}家影院上映
								<span id="watchCount"class="watchCount">{{item.watchCount}}人购票</span>
							</p>
						</li>
					
					<!--即将开始播放-->
				
		
					
				
					
						<li class="item" v-for="item in willPlayList" :key="item.id"@click="clickFun(item.id)">
							<img :src="item.poster.thumbnail"/>
						
							<div class="center">
								<p id="name"class="name">
								{{item.name}}

								</p>
								<p id="intro"class="intro">{{item.intro}}</p>
								<p id="cinemaCount"class="cinemaCount"style="color: orange;">
									{{releaseDate(item.premiereAt)}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span id="watchCount"class="watchCount">{{releaseWeek(item.premiereAt)}}</span>
								</p>
							</div>
							
						</li>
			</van-list>
		</ul>
			
		
</template>

<script>
	import { ajax } from '@/utils'
	import { List,Cell } from 'vant';
	export default{
		props: ['urlName'],
		
		data(){
			return{
				//正在播放
				list: [],
				playingList:[],
				// 即将播放
				willPlayList:[],
				loading: false,
		      	finished: false,
		      	// 数据获取中
		      	getting: false,
		      	page:1,
		      	total:1
			};
		},
		components: {
			[List.name] : List,
		  	[Cell.name] : Cell
		},
		created(){
			
			this.getList();
			this.$store.commit('updateTitle','卖座电影');
			
		},
		methods: {
			getList(name,count){
				let url = `/v4/api/film/${this.urlName}`;
				let data ={
					page: this.page,
					count: 7
				};
				this.getting = true;
				ajax(url,data,(res)=> {

					if (this.urlName === 'now-playing') {
						if(this.page === 1){
						
						this.playingList = res.films;
						this.total = res.page.total;
						
						}else{
							// 后面获取数据，就将数据加载在前面数据的末尾(新旧数据合并)
							this.playingList = [
								// 原有数据
								...this.playingList,
								// 后面请求回来的数据
								...res.films
							]
						}
					} else {
							if(this.page === 1){
							
							this.willPlayList = res.films;
							this.total = res.page.total;
							
							}else{
							// 后面获取数据，就将数据加载在前面数据的末尾(新旧数据合并)
							this.willPlayList = [
								// 原有数据
								...this.willPlayList,
								// 后面请求回来的数据
								...res.films
							]
						}	
					}
					
					// 渲染完成之后会触发回调函数
					this.$nextTick(() => {
						this.getting = false;
						this.loading = false;
					});
					++this.page;

				})
			},
			
			
			releaseDate(times){
				
				let time = new Date(times);
				
				let day = time.getDate();
				let month = time.getMonth() + 1;
				return `${month}月${day}日上映`;
			},
			releaseWeek(timeel){
				
				let times = new Date(timeel);
				let week = times.getDay();

				return `星期 ${this.isWeek(week)}`;
			},
			isWeek(week){
				if(week === 1){
					return '一';
				}
				if(week === 2){
					return '二';
				}
				if(week === 3){
					return '三';
				}
				if(week === 4){
					return '四';
				}
				if(week === 5){
					return '五';
				}
				if(week === 6){
					return '六';
				}
				if(week === 0){
					return '日';
				}
			},
			
			clickFun(id){
				console.log(id);
				this.$router.push({path: 'detail',query:{id}});
			},
			
			onLoad(){
				
				// 当页面数小于或等于总页数，会请求数据，否则不请求
				if(this.page <= this.total){
					// 如果正在获取数据，则不发送请求
					if(!this.getting){
						this.getList();
					}
				}else{
					// 不loading,结束了
					this.loading = false;
					this.finished = true;
				}
			}
		},
	}
</script>
			

